<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="./template.xhtml">

    <ui:define name="head">
        <style type="text/css">
            /* Custom styles for the Timeline */  
            div.timeline-frame {  
                border-color: #5D99C3;  
                border-radius: 5px;  
            }  

            div.timeline-axis {  
                border-color: #5D99C3;  
                background-color: #5D99C3;  
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5D99C3', endColorstr='#3A6DA0') alpha(opacity = 100);  
                background: -webkit-gradient(linear, left top, left bottom, from(#5D99C3), to(#3A6DA0));  
                background: -moz-linear-gradient(top,  #5D99C3,  #3A6DA0);  
                -khtml-opacity: 1;  
                -moz-opacity: 1;  
                opacity: 1;  
            }  

            div.timeline-groups-axis {  
                border-color: #5D99C3;  
            }  

            div.timeline-groups-axis-onleft {  
                border-style: none solid none none;  
            }  

            div.timeline-axis-text {  
                color: white;  
            }  

            div.timeline-event {  
                color: white !important;  
                border-radius: 5px !important;  
            }  

            div.timeline-event-content {  
                padding: 5px;  
                text-shadow: none;  
            }  

            div.unavailable {  
                background: #F03030 none !important;  /* red */  
                border-color: #bd2828 !important;     /* red */  
            }  

            div.available {  
                background: #1AA11A none !important;  /* green */  
                border-color: #136e13 !important;     /* green */  
            }  

            div.maybe {  
                background: #FFA500 none !important;  /* orange */  
                border-color: #cc8100 !important;     /* orange */  
            }  

            div.timeline-event-selected {  
                background: #BECEFE none !important;  
                border-color: #97B0F8 !important;  
            }  
        </style>
    </ui:define>

    <ui:define name="title">
        Timeline - <span class="subitem">All Events</span>
    </ui:define>

    <ui:define name="description">
        This example demonstrates all events exposed by Timeline.
    </ui:define>

    <ui:param name="documentationLink" value="/components/timeline" />

    <ui:define name="implementation">

        <p:growl id="growl" showSummary="true" showDetail="true" keepAlive="true" life="3000">
            <p:autoUpdate />
        </p:growl>

        <p:timeline id="timeline" value="#{allEventsTimelineView.model}"
                    editable="true" eventMargin="10" eventMarginAxis="0"  
                    start="#{allEventsTimelineView.start}"  
                    end="#{allEventsTimelineView.end}"
                    axisOnTop="true" stackEvents="false">
            <p:ajax event="add" listener="#{allEventsTimelineView.onAdd}"/>
            <p:ajax event="changed" listener="#{allEventsTimelineView.onChanged}"/>
            <p:ajax event="edit" listener="#{allEventsTimelineView.onEdit}"/>
            <p:ajax event="delete" listener="#{allEventsTimelineView.onDelete}"/>
            <p:ajax event="select" listener="#{allEventsTimelineView.onSelect}"/>
            <p:ajax event="rangechanged" listener="#{allEventsTimelineView.onRangeChanged}"/>
            <p:ajax event="lazyload" listener="#{allEventsTimelineView.onLazyLoad}"/>
            <p:ajax event="drop" listener="#{allEventsTimelineView.onDrop}"/>
        </p:timeline>

    </ui:define>

</ui:composition>
